import React from 'react'
//布局相关组件
import { Layout, Menu, Breadcrumb, Icon } from 'antd'
const { Header, Content, Sider } = Layout

//导入组件
import MovieList from '@/components/MovieList'
import MovieDetail from '@/components/MovieDetail'


//导入路由组件
import { Route, Link,Switch } from "react-router-dom"





export default class Movie extends React.Component{
    constructor(props){
        super(props)
        this.state={}
    }

    render(){
        return<Layout style={{ height: '100%'}} >
        <Sider width={200} style={{ background: '#fff' }}>
           <Menu mode="inline" defaultSelectedKeys={[window.location.hash.split('/')[2]]} style={{ height:'100%', borderRight: 0 }}>
              <Menu.Item key="in_theaters"><Link to = "/movie/in_theaters/1">正在热映</Link></Menu.Item>
              <Menu.Item key="coming_soon"><Link to = "/movie/coming_soon/1">即将上映</Link></Menu.Item>
              <Menu.Item key="top250"><Link to = "/movie/top250/1">TOP250</Link></Menu.Item>
           </Menu>
        </Sider>
        <Layout style={{ paddingLeft: '1px' }}>
          <Content style={{background: '#fff',height :'100%',padding: 10,margin: 0}}>
            <Switch>
            <Route path='/movie/detail/:id'   component={MovieDetail}></Route>
            <Route path="/movie/:type/:page"  component={MovieList}></Route>
            
            </Switch>
          </Content>
        </Layout>
      </Layout>
    }
}